<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-alert message="以下几种定时任务建议设置为1分执行一次!" banner />
      <div class="item">
        <div class="item-title">自动下架预约时间过期商品</div>
        <div class="item-copy">
          <a-input disabled :value="data.autoDownGoods" />
          <a-button type="primary" @click="onCopy(data.autoDownGoods)">复制</a-button>
        </div>
      </div>
      <div class="item">
        <div class="item-title">处理订单相关逻辑</div>
        <div class="item-copy">
          <a-input disabled :value="data.order" />
          <a-button type="primary" @click="onCopy(data.order)">复制</a-button>
        </div>
      </div>
      <div class="item">
        <div class="item-title">消息队列</div>
        <div class="item-copy">
          <a-input disabled :value="data.queue" />
          <a-button type="primary" @click="onCopy(data.queue)">复制</a-button>
        </div>
      </div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { timerTaskCopy } from '@/api/store'
export default {
  name: 'timerTaskCopy',
  data () {
    return {
      data: {
        autoDownGoods: '',
        order: '',
        queue: ''
      }
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    async getData () {
      const res = await timerTaskCopy()
      this.data = res.data
    },
    onCopy (item) {
      this.$copyText(item)
        .then((e) => {
          this.$message.success('复制成功')
        })
        .catch(err => {
          console.log(err)
          this.$message.error('复制失败')
        })
    }
  }
}
</script>
<style scoped>
.item {
  padding: 20px 0;
}
.item-title {
  margin-bottom: 10px;
}
.item-copy {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>